<template>
  <div class="pt-20" v-loading="loading">
    <div v-if="isShow">
      <div class="p-all-16 bgff br-10 mb-16 warp pointer" v-for="(item,index) in list" :key="index" @click="handelMsgDetail(item)">
        <div class="col333 fs-14 fw-b mb-10">{{item.name}}</div>
        <!-- <div class="col666 fs-12 mb-20">{{item.content}}</div> -->
        <div class="w100 rowsb rowsm">
            <div class=""></div>
            <div class="fs-12 col888">{{item.createTime}}</div>
        </div>
    </div>
    </div>

    <msgDetail :msgDetailData="msgDetailData" v-else @childEvent="changeShow"></msgDetail>
    <el-pagination
     v-if="isShow"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import msgDetail from './msgDetail.vue'
export default {
  components: {
    msgDetail
  },
  props: {},
  data() {
    return {
      loading:false,
      isShow:true,
      list:[],
      total:10,
      currentPage: 1,
      // 分页
      pagination:{
        pageNum:1,
        pageSize:6
      },
      msgDetailData:{}
    };
  },
  watch: {},
  computed: {},
  methods: {
    replaceSpacesInText(htmlContent) {
      // 使用 DOMParser 将 HTML 字符串解析为 DOM
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlContent, 'text/html');

      // 创建一个 TreeWalker 来遍历文本节点
      const walker = document.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT, null, false);

      // 遍历文本节点并替换空格
      while (walker.nextNode()) {
        const textNode = walker.currentNode;
        textNode.nodeValue = textNode.nodeValue.replace(/ /g, '&nbsp;');
      }

      // 返回修改后的 HTML 字符串
      return doc.body.innerHTML;
    },
    convertClassToStyle(html) {
      // 创建一个 DOMParser 实例
      const parser = new DOMParser();
      // 解析 HTML 字符串
      const doc = parser.parseFromString(html, 'text/html');

      // 获取所有带有 class 属性的元素
      const elements = doc.querySelectorAll('[class]');

      elements.forEach(element => {
        // 获取 class 属性的值
        const classList = element.className.split(' ');

        // 根据 class 名称设置相应的 style 属性
        // 这里可以根据实际需要定义样式映射
        const styleMap = {
          'ql-align-justify': 'text-align: justify;',
          'ql-align-center': 'text-align: center;',
          // 添加其他 class 到 style 的映射
        };

        // 将 class 转换为 style
        classList.forEach(className => {
          if (styleMap[className]) {
            element.style.cssText += styleMap[className];
          }
        });

        // 移除 class 属性
        element.removeAttribute('class');
      });
      // 返回转换后的 HTML
      return doc.body.innerHTML;
    },
    changeShow(){
      this.isShow = true
      this.getList()
    },
    handelMsgDetail(item){
      this.msgDetailData = item
      this.msgDetailData.content = this.replaceSpacesInText(this.convertClassToStyle(this.msgDetailData.content)
          .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')).replace(/amp;/g, '')
      this.isShow = false
    },
     handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getList()
    },
     handleCurrentChange(val) {
        this.pagination.pageNum = val
        this.getList()
      },
    getList(){
      this.loading = true
      this.$axios.post(`pronotice/list?pageNum=${this.pagination.pageNum}&pageSize=${this.pagination.pageSize}`,{}).then(res => {
        if(res.data.code != 200) return this.$notify({
          title: '提示',
          message: res.data.msg
        });
        let {rows} = res.data
        this.list = rows
        this.total = res.data.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  },
  created() {
    this.getList()
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.warp{
  width: 1000px;
}
.pointer{
  cursor: pointer;
}
/deep/.el-pager li.active{
  color: #E33636;
}
/deep/.el-pager li:hover{
  color: #E33636;
}
</style>